<template>
  <div>
        <h1>Toast 消息提示</h1>
        <p>常用的消息提示吐司</p>
        <div>
            <h2>基础用法</h2>
            <p>从顶部出现，使用 type 来设置不同的状态</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button type="success" @click="open1('success')" style="margin-left:10px">Success</mo-button>
                        <mo-button type="info" @click="open1('info')" style="margin-left:10px">Info</mo-button>
                        <mo-button type="warning" @click="open1('warning')" style="margin-left:10px">Warning</mo-button>
                        <mo-button type="error" @click="open1('error')" style="margin-left:10px">Error</mo-button>
                        <mo-button type="dark" @click="open1('dark')" style="margin-left:10px">Dark</mo-button>
                    </div>

                </div>
                <div class="code-box" v-show="button1">
                    <pre v-highlight><code class="vue">{{ code1 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button1=!button1">
                        {{button1?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>弹出位置</h2>
            <p>使用 position 控制吐司弹出的方向。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button @click="open2('top')">从上面弹出</mo-button>
                        <mo-button style="margin-left:10px" @click="open2('bottom')">从下面弹出</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button2">
                    <pre v-highlight><code class="vue">{{ code2 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button2=!button2">
                        {{button2?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>弹出时间</h2>
            <p>使用 duration 控制吐司弹出的显示时间。</p>
            <div class="preview-box">
                <div style="padding:20px">
                    <div class="flex-start">
                        <mo-button @click="open3(1000)">显示1秒</mo-button>
                        <mo-button style="margin-left:10px" @click="open3(5000)">显示5秒</mo-button>
                    </div>
                </div>
                <div class="code-box" v-show="button3">
                    <pre v-highlight><code class="vue">{{ code3 }}</code></pre>  
                </div>
                <div class="preview-code flex-center">
                    <el-link :underline="false" @click="button3=!button3">
                        {{button3?'隐藏源代码':'查看源代码'}}
                    </el-link>
                </div>
            </div>
        </div>

        <div>
            <h2>属性</h2>
             <el-table 
                :data="attrList" 
                style="width: 800px"
                :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
                    <el-table-column property="attr" label="属性"/>
                    <el-table-column property="desc" label="描述" />
                    <el-table-column property="type" label="类型"/>
                    <el-table-column property="opt" label="可选值" />
                    <el-table-column property="default" label="默认值"/>
             </el-table>
        </div>
       
    </div>
</template>

<script>
import { computed, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import code from '@/views/component/toast/code';
import attrs from '@/views/component/toast/attrs';
export default {
    name: 'link',
    components: {},
    props: {},
    emits: [],
    setup () 
    {
        const {proxy} = getCurrentInstance();
        let data = reactive({
            button1:false,
            button2:false,
            button3:false
        });
        let methods = {
            open1 (value)
            {
                proxy.$MoToast({
                    type:value, 
                    str:'我是一个提示'
                });
            },
            open2 (value)
            {
                proxy.$MoToast({
                    type:'success', 
                    str:'我是一个提示',
                    position:value
                });
            },
            open3 (value)
            {
                proxy.$MoToast({
                    type:'success', 
                    str:'我是一个提示',
                    position:'top',
                    duration:value
                });
            }
        };
        
        return {
            ...code,
            ...toRefs(data),
            ...attrs,
            ...methods
        };
    }
};

</script>
<style lang='scss' scoped>
</style>
